<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>使用html5 + nodejs 实现留言板功能</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="http://7xn3nv.com1.z0.glb.clouddn.com/mygbook.css">
</head>
<body>
  <header><h1>人过留名，雁过留声</h1></header>
  <div class="guest-book">
    <div class="guest-form">
      <form id="submit-form">
        <div class="clearfix form-group">
          <label for="user-name" class="left">您的大名：</label>
          <div class="right">
            <input type="text" name="userName" id="user-name" placeholder="留下姓名" required>
          </div>
        </div>
        <div class="clearfix form-group">
          <label for="user-message" class="left">您的高论：</label>
          <div class="right">
            <textarea name="userMessage" id="user-message" rows="3" placeholder="别说你不知道写什么。。。" required></textarea>
          </div>
        </div>
        <div class="clearfix form-group"><button type="submit" id="gbook-submit">走一个</button></div>
      </form>
    </div>
    <ul class="guest-data" id="message-list">
    </ul>
  </div>
  <div class="modify-popup">
    <div class="shade"></div>
    <form id="modify-form">
      <div class="clearfix form-group">
        <label for="user-name" class="left">您的大名：</label>
        <div class="right">
          <input type="text" name="userName" id="edit-name" placeholder="留下姓名" required>
        </div>
      </div>
      <div class="clearfix form-group">
        <label for="user-message" class="left">您的高论：</label>
        <div class="right">
          <textarea name="userMessage" id="edit-message" rows="3" placeholder="别说你不知道写什么。。。" required></textarea>
        </div>
      </div>
      <input type="hidden" id="edit-gid">
      <div class="clearfix form-group"><button type="submit" id="gbook-submit">走一个</button></div>
    </form>
  </div>
  <footer><h1>版权所有 @yuanqiao 2016</h1></footer>
  <!-- 脚本文件部分 -->
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <script>
    /*
      接收一个字符串或者数字，如果这个字符串小于10 则前面加个0
    */
    function getTwoDigit(o){return o<10?'0'+o:o;}
    // 获取时分秒的方法
    function getDates(){
      var date = new Date();
      var hour = date.getHours();
      var minu = date.getMinutes();
      var seco = date.getSeconds();
      return getTwoDigit(hour)+':'+getTwoDigit(minu)+':'+getTwoDigit(seco);
    }
    // 判断浏览器是否支持 localStorage
    if(window.localStorage){
      console.log('浏览器支持localStorage');
      var storage = window.localStorage;
      if (storage.getItem('uname')) $('#user-name').val(storage.getItem('uname'));
    }
    var messageList = $('#message-list');
    // 新增数据
    $('#submit-form').on('submit',function(){
      var uname = $('#user-name').val();
      var utxt = $('#user-message').val();
      let data = {userName: uname, content: utxt}
      storage.setItem('uname',uname);
      $.ajax({
        type: 'post',
        url: '/api/gbook/add',
        data: data,
        dataType: 'json'
      }).done(function(res){
        $('#user-message').val('');
        showList();
      }).fail(function(err){
        console.log(err);
      });
      return false;
    });
    function showList(){
      $.ajax({
        type: 'get',
        url: '/api/gbook/inquire?page=1&count=20',
        dataType: 'json'
      }).done(function(res){
        var datas = res.datas;
        var len = datas.length, i, result='';
        for (i = 0; i < len; i++){
          result += '<li class="clearfix">'+
                    '  <div class="avatar">'+
                    '    <img src="http://placehold.it/50x50" alt="">'+
                    '  </div>'+
                    '  <div class="data">'+
                    '    <div class="name">'+datas[i].userName+'</div>'+
                    '    <div>'+datas[i].content+'</div>'+
                    '    <div class="time">'+datas[i].createAt.replace('T', ' ').substring(0, 19)+'</div>'+
                    '  </div>'+
                    '  <div class="operate">'+
                    '    <a href="javascript:;" class="remove-this" data-id="'+datas[i]._id+'">删除</a>'+
                    '    <a href="javascript:;" class="edit-this" data-id="'+datas[i]._id+'">修改</a>'+
                    '  </div>'+
                    '</li>';
        }
        messageList.html(result);
      }).fail(function(err){
        console.log(err);
      });
    }
    showList();
    // 删除数据
    $('.guest-data').on('click','.remove-this',function(){
      var _this = $(this);
      var id = _this.attr('data-id');
      if(confirm('确认删除吗?')){
        $.ajax({
          type: 'delete',
          url: '/api/gbook/delete?_id='+id,
          dataType: 'json'
        }).done(function(res){
          console.log(res);
          _this.parent().parent().remove();
        }).fail(function(err){
          console.log(err);
        });
      }
    });
    // 修改
    var editName = $('#edit-name');
    // var editMessage = $('#edit-message');
    var editGid = $('#edit-gid');
    var modifyPopup = $('.modify-popup');
    $('.guest-data').on('click','.edit-this',function(){
      modifyPopup.fadeIn(200);
      var id = $(this).attr('data-id');
      $.ajax({
        type: 'get',
        url: '/api/gbook/find?_id='+id,
        dataType: 'json'
      }).done(function(res){
        editName.val(res.userName);
        $('#edit-message').val(res.content);
        editGid.val(id);
      }).fail(function(err){
        console.log(err);
      });
    });
    // 修改提交
    $('#modify-form').on('submit',function(){
      var uname = editName.val();
      var utxt = $('#edit-message').val();
      var id = editGid.val();
      var data = {
        _id: id,
        userName: uname,
        content: utxt
      }
      storage.setItem('uname',uname);
      $.ajax({
        type: 'patch',
        url: '/api/gbook/update',
        data: data,
        dataType: 'json'
      }).done(function(res){
        modifyPopup.fadeOut(200);
        showList();
      }).fail(function(err){
        console.log(err);
      });
      return false;
    });
    // 关闭修改弹窗
    $('.shade').on('click',function(){
      modifyPopup.fadeOut(200);
    });
  </script>
</body>
</html>